<template>
  <div class="bus">
    <div class="top">
      <span v-on:click="back()" class="iconfont">&#xe779;</span>
      <p class="mytype">{{ sjobj.name }}</p>
    </div>
    <div class="stop">
      <div class="one">
        <img :src="sjobj.src" alt="" />
        <div class="xinxi">
          <span>起送￥{{ sjobj.qs }}</span>
          <span>配送￥{{ sjobj.ps }}</span>
          <span>{{ sjobj.sj }}分钟</span>
          <p>{{ sjobj.xy }}</p>
        </div>
        <span class="iconfont">&#xe667;</span>
        <span class="sc">收藏</span>
      </div>
      <div class="two">
        <span>起送￥{{ sjobj.qs }}</span>
        <span>配送￥{{ sjobj.ps }}</span>
        <span>{{ sjobj.sj }}分钟</span>
      </div>
    </div>
    <div class="stype">
      <ul>
        <li @click="click(0)">
         <router-link :to="{path:'/business/commodity',query:{page:'sp',id:id}}"><span :class="index==0?'active':''">商品</span> </router-link>
        </li>
        <li  @click="click(1)">
          <router-link  :to="{path:'/business/evaluate',query:{page:'pl',id:id}}"><span :class="index==1?'active':''">评价</span> </router-link>
        </li>
        <li  @click="click(2)">
          <router-link  :to="{path:'/business/information',query:{page:'sj',id:id}}"><span :class="index==2?'active':''">商家</span> </router-link>
        </li>
      </ul>
    </div>
    <div class="shitu">
      <router-view />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.bus {
  width: 100%;
  overflow: hidden;
  background-color: rgb(247, 247, 247);
  .top {
    top: 0;
    position: fixed;
    width: 100%;
    height: 50px;
    background-color: rgb(22, 187, 250);
    display: flex;
    span {
      width: 50px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      font-weight: bold;
      color: white;
    }
    p {
      font-size: 18px;
      font-weight: bold;
      color: white;
      width: 100%;
      line-height: 50px;
      text-align: center;
      margin: 0;
      padding: 0;
      margin-left: -25px;
    }
  }
  .stop {
    margin-top: 50px;
    background-color: rgba(22, 187, 250,0.7);
    .one {
      display: flex;
      position: relative;
      img {
        padding: 10px;
        width: 40px;
        height: 40px;
      }
      .xinxi {
        span {
          color: white;
          font-size: 12px;
          padding: 0 10px;
          border-left: 1px solid rgb(231, 231, 231);
        }
        span:nth-child(1) {
          padding-left: 0;
          border: none;
        }
        p {
          color: white;
          width: 75%;
          padding: 0;
          margin: 0;
          font-size: 12px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      > span {
        color: white;
        font-size: 27px;
        position: absolute;
        right: 10px;
        top: 7px;
      }
      .sc {
        top: 30px;
        font-size: 14px;
      }
    }
    .two {
      margin-left: 10px;
      height: 20px;
      display: flex;
      padding: 5px;
      span {
        color: white;
        font-size: 12px;
        padding: 0 10px;
        border-left: 1px solid rgb(231, 231, 231);
      }
      span:nth-child(1) {
        padding-left: 0;
        border: none;
      }
    }
  }
  .stype {
    width: 100%;
    background-color: rgb(236, 236, 236);
    ul {
      margin: 0;
      padding: 0;
      display: flex;
      li {
        width: 33.33%;
        a {
          display: block;
          text-align: center;
          padding-bottom: 10px;
          span {
            font-size: 15px;
            font-weight: bold;
            padding: 4px;
          }
                      .active{
              border-bottom: 3px solid red;   
            }
        }
      }
    }
  }
  .shitu{}
}
</style>
<script>
export default {
  name: "business",
  data() {
    return {
      sjobj: {},
      arr1: [],
      index:0,
      id:0
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    },
    click(i){
        this.index=i
    }
  },
  mounted() {
    this.id=this.$route.query.id
    let _this = this;
    let pro = this.$http({
      method: "get",
      url: "/data.json",
      data: {},
    });
    pro.then(function (res) {
      for (let i = 0; i < res.data.length; i++) {
        if (res.data[i].id == _this.id) {
          _this.sjobj = res.data[i];
          _this.arr1 = _this.sjobj.shop;
        }
      }
    });
 },
};
</script>